<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>钻井参数</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- 引入 ECharts GL 用于3D图表 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }
    
    body {
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    
    .container {
      width: 600px;
      height: 350px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    
    .container.dark {
      background-color: #051E35;
      color: white;
    }
    
    .container.light {
      background-color: white;
      color: #202124;
    }
    
    .header {
      padding: 8px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      height: 40px;
    }
    
    .dark .header {
      background-color: rgba(0, 0, 0, 0.2);
    }
    
    .light .header {
      background-color: #f8f9fa;
    }
    
    .header-buttons {
      display: flex;
      gap: 8px;
    }
    
    .theme-toggle, .nav-btn, .refresh-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      border: none;
      font-size: 12px;
    }
    
    .dark .theme-toggle, .dark .nav-btn, .dark .refresh-btn {
      background-color: rgba(255,255,255,0.1);
      color: white;
    }
    
    .light .theme-toggle, .light .nav-btn, .light .refresh-btn {
      background-color: rgba(0,0,0,0.05);
      color: #202124;
    }
    
    .theme-toggle:hover, .nav-btn:hover, .refresh-btn:hover {
      opacity: 0.8;
    }
    
    .theme-icon, .nav-icon {
      font-size: 14px;
    }
    
    .tabs {
      display: flex;
      border-bottom: 1px solid #e0e0e0;
      flex-shrink: 0;
    }
    
    .dark .tabs {
      background-color: rgba(0, 0, 0, 0.1);
    }
    
    .light .tabs {
      background-color: #f8f9fa;
    }
    
    .tab {
      padding: 8px 12px;
      cursor: pointer;
      flex: 1;
      text-align: center;
      border-bottom: 2px solid transparent;
      font-size: 14px;
    }
    
    .dark .tab.active {
      border-bottom: 2px solid white;
      color: white;
      font-weight: bold;
      background-color: rgba(255,255,255,0.1);
    }
    
    .light .tab.active {
      border-bottom: 2px solid #051E35;
      color: #051E35;
      font-weight: bold;
      background-color: white;
    }
    
    .content {
      padding: 10px;
      overflow: hidden;
      flex-grow: 1;
      display: flex;
    }
    
    .list-view {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
      padding-right: 5px;
    }
    
    .param-row {
      display: flex;
      align-items: center;
      padding: 12px 10px;
      border-radius: 0 4px 4px 0;
    }
    
    .dark .param-row {
      border-left: 4px solid white;
      background-color: rgba(255,255,255,0.1);
    }
    
    .light .param-row {
      border-left: 4px solid #051E35;
      background-color: #e8f0fe;
    }
    
    .param-content {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .param-info {
      display: flex;
      flex-direction: column;
    }
    
    .param-name {
      font-weight: bold;
      font-size: 15px;
      margin-bottom: 4px;
    }
    
    .dark .param-name {
      color: white;
    }
    
    .light .param-name {
      color: #202124;
    }
    
    .param-range {
      font-size: 13px;
    }
    
    .dark .param-range {
      color: rgba(255,255,255,0.7);
    }
    
    .light .param-range {
      color: #5f6368;
    }
    
    .param-values {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    
    .value-row {
      display: flex;
      align-items: baseline;
      margin-bottom: 4px;
    }
    
    .value-label {
      font-size: 13px;
      margin-right: 6px;
    }
    
    .dark .value-label {
      color: rgba(255,255,255,0.7);
    }
    
    .light .value-label {
      color: #5f6368;
    }
    
    .param-value {
      font-weight: bold;
      font-size: 15px;
    }
    
    .dark .current-value .param-value {
      color: white;
    }
    
    .light .current-value .param-value {
      color: #051E35;
    }
    
    .recommend-value .param-value {
      color: #34a853;
    }
    
    .param-unit {
      font-size: 13px;
      margin-left: 3px;
    }
    
    .dark .param-unit {
      color: rgba(255,255,255,0.7);
    }
    
    .light .param-unit {
      color: #5f6368;
    }

    .warning-row {
        display: flex;
        align-items: center;
        padding: 12px 10px;
        border-radius: 0 4px 4px 0;
    }
    
    .dark .warning-row {
      border-left: 4px solid #d93025;
      background-color: rgba(217, 48, 37, 0.1);
    }
    
    .light .warning-row {
      border-left: 4px solid #d93025;
      background-color: #fce8e6;
    }
    
    .dark .warning-row.normal {
      border-left-color: #34a853;
      background-color: rgba(52, 168, 83, 0.1);
    }
    
    .light .warning-row.normal {
      border-left-color: #34a853;
      background-color: #e6f4ea;
    }
    
    .dark .warning-row.attention {
      border-left-color: #f9ab00;
      background-color: rgba(249, 171, 0, 0.1);
    }
    
    .light .warning-row.attention {
      border-left-color: #f9ab00;
      background-color: #fef7e0;
    }
    
    .warning-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .warning-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    
    .warning-title {
      font-weight: bold;
      font-size: 15px;
    }
    
    .dark .warning-title {
      color: #d93025;
    }
    
    .light .warning-title {
      color: #d93025;
    }
    
    .dark .normal .warning-title {
      color: #34a853;
    }
    
    .light .normal .warning-title {
      color: #34a853;
    }
    
    .dark .attention .warning-title {
      color: #f9ab00;
    }
    
    .light .attention .warning-title {
      color: #f9ab00;
    }
    
    .warning-desc {
      font-size: 14px;
      line-height: 1.4;
    }
    
    .dark .warning-desc {
      color: rgba(255,255,255,0.7);
    }
    
    .light .warning-desc {
      color: #5f6368;
    }
    
    .warning-value {
      font-weight: bold;
      font-size: 14px;
    }
    
    .dark .warning-value {
      color: #d93025;
    }
    
    .light .warning-value {
      color: #d93025;
    }
    
    .dark .normal .warning-value {
      color: #34a853;
    }
    
    .light .normal .warning-value {
      color: #34a853;
    }
    
    .dark .attention .warning-value {
      color: #f9ab00;
    }
    
    .light .attention .warning-value {
      color: #f9ab00;
    }
    
    .hidden {
      display: none;
    }
    
    .icon {
      margin-right: 4px;
      font-size: 12px;
    }
    
    /* 司钻导航仪样式 */
    .drill-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    
    .drill-nav.active {
      opacity: 1;
      pointer-events: auto;
    }
    
    .nav-container {
      width: 90%;
      height: 90%;
      background-color: #051E35;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    
    .nav-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .nav-title {
      font-size: 24px;
      font-weight: bold;
      color: white;
    }
    
    .risk-indicator {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .risk-level {
      padding: 6px 12px;
      border-radius: 20px;
      font-weight: bold;
      font-size: 14px;
    }
    
    .risk-level.high {
      background-color: #d93025;
      color: white;
    }
    
    .risk-level.medium {
      background-color: #f9ab00;
      color: #202124;
    }
    
    .risk-level.low {
      background-color: #34a853;
      color: white;
    }
    
    .close-nav {
      background: none;
      border: none;
      color: white;
      font-size: 20px;
      cursor: pointer;
    }
    
    .nav-content {
      display: flex;
      flex: 1;
      gap: 20px;
    }
    
    .nav-visualization {
      flex: 2;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 18px;
      position: relative;
    }
    
    #drill-chart {
      width: 100%;
      height: 100%;
    }
    
    .risk-legend {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background-color: rgba(0, 0, 0, 0.7);
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 12px;
      z-index: 10;
    }
    
    .legend-item {
      display: flex;
      align-items: center;
      margin: 4px 0;
    }
    
    .legend-color {
      width: 12px;
      height: 12px;
      border-radius: 2px;
      margin-right: 6px;
    }
    
    .nav-params {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .nav-param {
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      padding: 15px;
      color: white;
      position: relative;
    }
    
    .param-risk {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    
    .param-risk.high {
      background-color: #d93025;
    }
    
    .param-risk.medium {
      background-color: #f9ab00;
    }
    
    .param-risk.low {
      background-color: #34a853;
    }
    
    .nav-param-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    
    .nav-param-value {
      font-size: 24px;
      font-weight: bold;
      color: #34a853;
    }
    
    .nav-param-range {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      margin-top: 5px;
    }
    
    .nav-warnings {
      margin-top: 20px;
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .nav-warning {
      padding: 12px;
      border-radius: 6px;
      background-color: rgba(217, 48, 37, 0.2);
      position: relative;
    }
    
    .nav-warning.normal {
      background-color: rgba(52, 168, 83, 0.2);
    }
    
    .nav-warning.attention {
      background-color: rgba(249, 171, 0, 0.2);
    }
    
    .nav-warning-title {
      font-weight: bold;
      font-size: 16px;
      color: white;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .nav-warning.normal .nav-warning-title {
      color: #34a853;
    }
    
    .nav-warning.attention .nav-warning-title {
      color: #f9ab00;
    }
    
    .nav-warning-desc {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
      margin-top: 5px;
    }
    
    .warning-time {
      position: absolute;
      top: 12px;
      right: 12px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
    }
    
    .risk-tabs {
      display: flex;
      margin-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .risk-tab {
      padding: 8px 16px;
      cursor: pointer;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      border-bottom: 2px solid transparent;
    }
    
    .risk-tab.active {
      color: white;
      border-bottom: 2px solid white;
      font-weight: bold;
    }
    
    .risk-content {
      flex: 1;
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container" :class="theme">
      <div class="header">
        <div class="theme-toggle" @click="toggleTheme">
          <span class="theme-icon">{{ theme === 'dark' ? '☀️' : '🌙' }}</span>
          <span>{{ theme === 'dark' ? '浅色模式' : '深色模式' }}</span>
        </div>
        <div class="header-buttons">
          <button class="nav-btn" @click="showDrillNav = true; initChart()">
            <span class="nav-icon">🧭</span>
            <span>司钻导航仪</span>
          </button>
          <button class="refresh-btn" @click="refreshData">
            <span class="icon">↻</span>
            <span>刷新</span>
          </button>
        </div>
      </div>
      
      <div class="tabs">
        <div 
          class="tab" 
          :class="{ active: activeTab === 'params' }"
          @click="activeTab = 'params'"
        >
          钻井参数
        </div>
        <div 
          class="tab" 
          :class="{ active: activeTab === 'warnings' }"
          @click="activeTab = 'warnings'"
        >
          风险预警
        </div>
      </div>

      <div class="content">
        <div class="list-view" v-show="activeTab === 'params'">
          <div class="param-row" v-for="param in params" :key="param.name">
            <div class="param-content">
              <div class="param-info">
                <div class="param-name">{{ param.name }}</div>
                <div class="param-range">推荐范围: {{ param.range }}</div>
              </div>
              <div class="param-values">
                <div class="value-row current-value">
                  <span class="value-label">当前:</span>
                  <span class="param-value">{{ param.current }}</span>
                  <span class="param-unit">{{ param.unit }}</span>
                </div>
                <div class="value-row recommend-value">
                  <span class="value-label">推荐:</span>
                  <span class="param-value">{{ param.recommend }}</span>
                  <span class="param-unit">{{ param.unit }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="list-view" v-show="activeTab === 'warnings'">
          <div 
            class="warning-row" 
            :class="warning.type" 
            v-for="warning in warnings" 
            :key="warning.title"
          >
            <div class="warning-content">
              <div class="warning-header">
                <span class="warning-title">{{ warning.title }}</span>
              </div>
              <div class="warning-desc" v-html="warning.desc"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 司钻导航仪弹窗 -->
    <div class="drill-nav" :class="{ active: showDrillNav }">
      <div class="nav-container">
        <div class="nav-header">
          <div class="nav-title">司钻导航仪 - 数字孪生视图</div>
          <div class="risk-indicator">
            <div class="risk-level" :class="overallRiskLevel">{{ overallRiskLevel === 'high' ? '高风险' : overallRiskLevel === 'medium' ? '中风险' : '低风险' }}</div>
          </div>
          <button class="close-nav" @click="showDrillNav = false">×</button>
        </div>
        <div class="nav-content">
          <div class="nav-visualization">
            <div id="drill-chart"></div>
            <div class="risk-legend">
              <div class="legend-item">
                <div class="legend-color" style="background-color: #1E90FF;"></div>
                <span>钻井轨迹</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background-color: #FF4500;"></div>
                <span>当前钻头位置</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background-color: #32CD32;"></div>
                <span>地层变化点</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background-color: #FF0000;"></div>
                <span>高风险区域</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background-color: #FFA500;"></div>
                <span>中风险区域</span>
              </div>
            </div>
          </div>
          <div class="nav-params">
            <div class="nav-param" v-for="param in params" :key="'nav-'+param.name">
              <div class="param-risk" :class="param.riskLevel"></div>
              <div class="nav-param-title">{{ param.name }}</div>
              <div class="nav-param-value">{{ param.recommend }} <span style="font-size: 14px;">{{ param.unit }}</span></div>
              <div class="nav-param-range">推荐范围: {{ param.range }}</div>
              <div style="margin-top: 8px; font-size: 14px;">
                当前值: <span :style="{ color: getValueColor(param) }">{{ param.current }} {{ param.unit }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="nav-warnings">
          <div class="risk-tabs">
            <div 
              class="risk-tab" 
              :class="{ active: riskTab === 'all' }"
              @click="riskTab = 'all'"
            >
              全部预警
            </div>
            <div 
              class="risk-tab" 
              :class="{ active: riskTab === 'high' }"
              @click="riskTab = 'high'"
            >
              高风险
            </div>
            <div 
              class="risk-tab" 
              :class="{ active: riskTab === 'medium' }"
              @click="riskTab = 'medium'"
            >
              中风险
            </div>
          </div>
          <div class="risk-content">
            <div 
              class="nav-warning" 
              :class="warning.type" 
              v-for="warning in filteredWarnings" 
              :key="'nav-'+warning.title"
            >
              <div class="nav-warning-title">
                <span v-if="warning.type === ''">⚠️</span>
                <span v-else-if="warning.type === 'attention'">⚠️</span>
                <span v-else>✅</span>
                {{ warning.title }}
              </div>
              <span class="warning-time">{{ warning.time }}</span>
              <div class="nav-warning-desc" v-html="warning.desc"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          activeTab: 'params',
          theme: 'dark',
          showDrillNav: false,
          riskTab: 'all',
          params: [
            {
              name: '钻压 (WOB)',
              range: '15-22 ton',
              current: '18',
              recommend: '20',
              unit: 'ton',
              riskLevel: 'low'
            },
            {
              name: '转速 (RPM)',
              range: '100-140 rpm',
              current: '120',
              recommend: '130',
              unit: 'rpm',
              riskLevel: 'medium'
            },
            {
              name: '排量 (Flow Rate)',
              range: '30-35 L/s',
              current: '28',
              recommend: '32',
              unit: 'L/s',
              riskLevel: 'high'
            },
            {
              name: '起下钻速度',
              range: '0.3-0.6 m/s',
              current: '0.5',
              recommend: '0.4',
              unit: 'm/s',
              riskLevel: 'medium'
            }
          ],
          warnings: [
            {
              title: '立压变化异常',
              desc: '立管压力10分钟内从<span class="warning-value">16 MPa</span>上升至<span class="warning-value">19 MPa</span>，可能指示井眼堵塞或钻头泥包，建议检查循环系统。',
              type: '',
              time: '10分钟前',
              riskLevel: 'high'
            },
            {
              title: '钩载波动',
              desc: '钩载在最近30分钟内波动范围达到<span class="warning-value">5-8 ton</span>，可能指示井壁不稳定或钻具振动，建议降低起下钻速度。',
              type: 'attention',
              time: '25分钟前',
              riskLevel: 'medium'
            },
            {
              title: '扭矩异常',
              desc: '旋转扭矩达到<span class="warning-value">12 kN·m</span>，超过正常范围<span class="warning-value">8-10 kN·m</span>，可能指示钻头磨损或地层变化，建议下次起钻检查。',
              type: 'attention',
              time: '42分钟前',
              riskLevel: 'medium'
            },
            {
              title: '地层变化',
              desc: '钻时从<span class="warning-value">25 min/m</span>降至<span class="warning-value">18 min/m</span>，可能进入较软地层，建议关注岩屑返出情况并调整钻压至<span class="warning-value">22 ton</span>。',
              type: 'normal',
              time: '1小时前',
              riskLevel: 'low'
            },
            {
              title: '井壁失稳风险',
              desc: '井径测井显示井眼扩大率<span class="warning-value">15%</span>，超过安全阈值<span class="warning-value">10%</span>，建议增加钻井液密度至<span class="warning-value">1.35 g/cm³</span>。',
              type: '',
              time: '2小时前',
              riskLevel: 'high'
            }
          ],
          chart: null,
          overallRiskLevel: 'medium'
        }
      },
      computed: {
        filteredWarnings() {
          if (this.riskTab === 'all') {
            return this.warnings;
          } else {
            return this.warnings.filter(w => w.riskLevel === this.riskTab);
          }
        }
      },
      methods: {
        refreshData() {
          alert('数据已刷新（模拟）');
        },
        toggleTheme() {
          this.theme = this.theme === 'dark' ? 'light' : 'dark';
        },
        getValueColor(param) {
          // 简单判断当前值是否在推荐范围内
          const range = param.range.split('-');
          const min = parseFloat(range[0]);
          const max = parseFloat(range[1]);
          const current = parseFloat(param.current);
          
          if (current < min || current > max) {
            return '#d93025'; // 红色表示超出范围
          } else if (Math.abs(current - parseFloat(param.recommend)) / (max - min) > 0.2) {
            return '#f9ab00'; // 黄色表示接近边界
          } else {
            return '#34a853'; // 绿色表示正常
          }
        },
        initChart() {
          // 确保DOM已经渲染
          this.$nextTick(() => {
            if (!this.chart) {
              this.chart = echarts.init(document.getElementById('drill-chart'));
            }
            
            // 生成模拟的钻井轨迹数据
            const data = this.generateDrillPath();
            
            // 计算整体风险等级
            this.calculateOverallRisk();
            
            const option = {
              backgroundColor: 'transparent',
              tooltip: {},
              legend: {
                data: ['钻井轨迹', '当前钻头位置', '地层变化点', '高风险区域', '中风险区域'],
                textStyle: {
                  color: '#fff'
                },
                top: 10
              },
              xAxis3D: {
                type: 'value',
                name: 'X (m)',
                nameTextStyle: {
                  color: '#fff'
                },
                axisLine: {
                  lineStyle: {
                    color: '#fff'
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              yAxis3D: {
                type: 'value',
                name: 'Y (m)',
                nameTextStyle: {
                  color: '#fff'
                },
                axisLine: {
                  lineStyle: {
                    color: '#fff'
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              zAxis3D: {
                type: 'value',
                name: '深度 (m)',
                nameTextStyle: {
                  color: '#fff'
                },
                axisLine: {
                  lineStyle: {
                    color: '#fff'
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              grid3D: {
                viewControl: {
                  autoRotate: true,
                  autoRotateSpeed: 10,
                  distance: 120
                },
                light: {
                  main: {
                    intensity: 1.2,
                    shadow: true,
                    shadowQuality: 'high',
                    alpha: 55,
                    beta: 10
                  },
                  ambient: {
                    intensity: 0.3
                  }
                }
              },
              series: [
                {
                  type: 'line3D',
                  name: '钻井轨迹',
                  data: data.path,
                  lineStyle: {
                    width: 4,
                    color: '#1E90FF'
                  },
                  emphasis: {
                    lineStyle: {
                      width: 6,
                      color: '#00BFFF'
                    }
                  }
                },
                {
                  type: 'scatter3D',
                  name: '当前钻头位置',
                  data: [data.currentPosition],
                  symbolSize: 16,
                  itemStyle: {
                    color: '#FF4500'
                  },
                  emphasis: {
                    itemStyle: {
                      color: '#FF6347'
                    }
                  }
                },
                {
                  type: 'scatter3D',
                  name: '地层变化点',
                  data: data.strataChanges,
                  symbolSize: 12,
                  itemStyle: {
                    color: '#32CD32'
                  }
                },
                {
                  type: 'scatter3D',
                  name: '高风险区域',
                  data: data.highRiskAreas,
                  symbolSize: 14,
                  itemStyle: {
                    color: '#FF0000'
                  }
                },
                {
                  type: 'scatter3D',
                  name: '中风险区域',
                  data: data.mediumRiskAreas,
                  symbolSize: 12,
                  itemStyle: {
                    color: '#FFA500'
                  }
                }
              ]
            };
            
            this.chart.setOption(option);
            
            // 窗口大小变化时重新调整图表大小
            window.addEventListener('resize', () => {
              this.chart.resize();
            });
          });
        },
        generateDrillPath() {
          // 生成模拟的钻井轨迹数据
          const path = [];
          const strataChanges = [];
          const highRiskAreas = [];
          const mediumRiskAreas = [];
          
          // 初始垂直段
          for (let z = 0; z > -500; z -= 10) {
            path.push([0, 0, z]);
          }
          
          // 第一段斜向段
          for (let i = 0; i < 100; i++) {
            const x = 50 * Math.sin(i * 0.05);
            const y = 50 * Math.cos(i * 0.05);
            const z = -500 - i * 8;
            path.push([x, y, z]);
            
            // 标记地层变化点
            if (i === 40) {
              strataChanges.push([x, y, z]);
            }
            
            // 标记高风险区域
            if (i > 30 && i < 50) {
              highRiskAreas.push([x, y, z]);
            }
          }
          
          // 第二段斜向段（方向变化）
          for (let i = 0; i < 120; i++) {
            const x = 50 * Math.sin(100 * 0.05) + 60 * Math.sin(i * 0.03);
            const y = 50 * Math.cos(100 * 0.05) + 60 * Math.cos(i * 0.03);
            const z = -1300 - i * 6;
            path.push([x, y, z]);
            
            // 标记地层变化点
            if (i === 80) {
              strataChanges.push([x, y, z]);
            }
            
            // 标记中风险区域
            if (i > 70 && i < 90) {
              mediumRiskAreas.push([x, y, z]);
            }
          }
          
          // 当前钻头位置（取路径的最后一点）
          const currentPosition = path[path.length - 1];
          
          return {
            path,
            currentPosition,
            strataChanges,
            highRiskAreas,
            mediumRiskAreas
          };
        },
        calculateOverallRisk() {
          // 根据参数和警告计算整体风险等级
          const highRiskParams = this.params.filter(p => p.riskLevel === 'high').length;
          const highRiskWarnings = this.warnings.filter(w => w.riskLevel === 'high').length;
          
          if (highRiskParams > 1 || highRiskWarnings > 0) {
            this.overallRiskLevel = 'high';
          } else if (this.params.filter(p => p.riskLevel === 'medium').length > 1 || 
                    this.warnings.filter(w => w.riskLevel === 'medium').length > 1) {
            this.overallRiskLevel = 'medium';
          } else {
            this.overallRiskLevel = 'low';
          }
        }
      },
      mounted() {
        // 初始化时计算整体风险等级
        this.calculateOverallRisk();
      }
    });
  </script>
</body>
</html>